<script setup>
import { ref } from 'vue'
import { tabConfig, menuConfig } from '@/pages/home/config'
import RefreshLoading from '@/components/RefreshLoading.vue'
import CustomLoading from '@/components/CustomLoading.vue'
import PrimaryButton from '@/components/PrimaryButton.vue'
import GoodsCard from '@/components/GoodsCard.vue'
import NoMore from '@/components/NoMore.vue'

// 控制刷新状态
const isLoading = ref(false)

// 搜索框
const searchKey = ref('')

// 当前tab栏对应的分类名称
const activeCategory = ref('推荐')

// 轮播图图片地址
const imageList = ref([
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-6.jpeg',
])

// 商品列表
const goodsList = ref([
  {
    id: '1',
    category: '推荐',
    categoryId: 1,
    name: 'Apple iPhone 14 Pro Max 正品国行苹果手机，一年质保，只换不修。质量杠杠滴',
    price: 9999.99,
    originalPrice: 10999.99,
    sales: 23453,
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    shopName: 'Apple官方旗舰店'
  },
  {
    id: '2',
    category: '推荐',
    categoryId: 1,
    name: 'Apple iPhone 15 Pro Max',
    price: 9999.99,
    originalPrice: 10999.99,
    sales: 5748,
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    shopName: 'Apple官方旗舰店'
  },
  {
    id: '3',
    category: '推荐',
    categoryId: 1,
    name: 'Apple iPhone 16 Pro Max',
    price: 9999.99,
    originalPrice: 10999.99,
    sales: 8347,
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    shopName: 'Apple官方旗舰店'
  },
  {
    id: '4',
    category: '推荐',
    categoryId: 1,
    name: 'Apple iPhone 16 Pro',
    price: 9999.99,
    originalPrice: 10999.99,
    sales: 8347,
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
    shopName: 'Apple官方旗舰店'
  },
])

const paging = ref()
const pagingList = ref([])

const initList = (page, pageSize) => {
  setTimeout(() => {
    paging.value.complete(goodsList.value)
  }, 1000)
}

// 刷新列表
const onRefresh = async () => {
  await paging.value.refresh()
  isLoading.value = false
}

// 轮播图
const swiperList = ref([
  '/static/images/home/banner-1.png',
  '/static/images/home/banner-2.png',
  '/static/images/home/banner-3.png',
  '/static/images/home/banner-4.png',
  '/static/images/home/banner-5.png',
  '/static/images/home/banner-6.png'
])

// 跳转到搜索页面
const goToSearch = () => {
  uni.navigateTo({
    url: '/pages/search/search'
  })
}

// 跳转到商品详情页面
const goToGoodsDetail = (goodsItem) => {
  uni.navigateTo({
    url: `/pages/goodsDetail/GoodsDetail`
  })
}
</script>

<template>
  <view>
    <z-paging
      ref="paging"
      v-model="pagingList"
      @query="initList"
      :refresher-enabled="false"
    >
      <template #loading>
        <CustomLoading></CustomLoading>
      </template>
      <!-- 搜索 -->
      <view
        class="flex white-bgc"
        style="
          --van-search-background: #F7F8FA;
          --van-swipe-indicator-inactive-opacity: 1;
          --van-swipe-indicator-inactive-background: #1a1617;
        "
      >
        <view class="flex-1">
          <van-search
            readonly
            shape="round"
            wrap-with-form
            :clearable="false"
            background="white"
            v-model="searchKey"
            @click="goToSearch"
            placeholder="请输入商品名称或者分类"
          />
        </view>
        <view class="p-tb-20 flex-center m-r-20 c-3 fs-24">
          <PrimaryButton
            text="搜索"
            padding-t-b="15rpx"
            padding-l-r="40rpx"
          />
        </view>
      </view>

      <!-- 轮播图 -->
      <view class="p-15">
        <van-swipe
          :autoplay="3000"
          indicator-color="#1a1617"
        >
          <van-swipe-item
            v-for="(item, index) in swiperList"
            :key="index"
            class="br-20 ovh"
          >
            <image
              :src="item"
              mode="widthFix"
              class="full-image br-20 ovh"
            ></image>
          </van-swipe-item>
        </van-swipe>
      </view>

      <!-- 菜单栏 -->
      <view class="menu p-lr-15 c-6 fs-24">
        <view
          v-for="menu in menuConfig"
          :key="menu.id"
          class="f-col-c"
        >
          <view
            class="menu-icon icon"
            :class="[menu.icon]"
          ></view>
          <view class="m-t-10">{{ menu.name }}</view>
        </view>
      </view>

      <!-- tab栏 -->
      <view
        class="m-t-15"
        :class="{ 'm-b-15': !isLoading }"
      >
        <van-tabs
          v-model:active="activeCategory"
          color="#1a1617"
        >
          <van-tab
            v-for="tab in tabConfig"
            :name="tab.name"
            :title="tab.name"
          ></van-tab>
        </van-tabs>
      </view>

      <!-- 商品列表 -->
      <RefreshLoading
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <GoodsCard
          v-for="goodsItem in goodsList"
          :key="goodsItem.id"
          :goods-item="goodsItem"
          @click="goToGoodsDetail(goodsItem)"
        >
        </GoodsCard>
      </RefreshLoading>

      <template #loadingMoreNoMore>
        <NoMore></NoMore>
      </template>
    </z-paging>
  </view>
</template>

<style lang="scss" scoped>
.van-swipe-item {
  image {
    height: 250rpx;
  }
}

.menu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 15rpx;

  .menu-icon {
    width: 60rpx;
    height: 60rpx;
  }
}
</style>